import { useState } from 'react';

const pageStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '100vh',
  backgroundColor: '#f8f9fa'
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    maxWidth: '720px',
    padding: '0 20px',
    marginTop:'100px'

  },
  searchContainer: {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    backgroundColor: '#fff',
    borderRadius: '12px',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
    padding: '8px 16px',
    transition: 'all 0.3s ease',
  },
  input: {
    flex: 1,
    padding: '12px 16px',
    fontSize: '16px',
    border: 'none',
    outline: 'none',
    backgroundColor: 'transparent',
    lineHeight: '1.6',
    minHeight: '48px',
    resize: 'none',
    fontFamily: 'system-ui, -apple-system, sans-serif'
  },
  button: {
    padding: '12px 32px',
    backgroundColor: '#1a8cff',
    color: 'white',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer',
    fontSize: '16px',
    fontWeight: '500',
    marginLeft: '12px',
    transition: 'all 0.2s ease',
    whiteSpace: 'nowrap',
    ':hover': {
      backgroundColor: '#0073e6'
    }
  },
  tips: {
    color: '#666',
    fontSize: '14px',
    marginTop: '16px',
    textAlign: 'center'
  }
};

const SearchBox = () => {
  const [query, setQuery] = useState('');
  const [isHovered, setIsHovered] = useState(false);

  return (
      <div style={styles.container}>
        <div style={styles.searchContainer}>
          <textarea
            placeholder="请输入需要验证的内容..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            style={styles.input}
            rows={3}
          />
          <button 
            style={{ 
              ...styles.button,
              backgroundColor: isHovered ? '#0073e6' : '#1a8cff',
              transform: isHovered ? 'scale(1.02)' : 'none'
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
          >
            立即验证
          </button>
        </div>
        <div style={styles.tips}>
          支持多行输入 | 自动识别各类信息 | 实时联网验证
        </div>
      </div>
  );
};

export default SearchBox;